<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">	<script src="https://img.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://img.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.highcharts.com.cn/highcharts/modules/series-label.js"></script>
    <script src="https://img.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://img.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<!--
*************************************************************************
   Generated by JShare at 2019-04-13 13:32:57
   From: https://jshare.com.cn/demos/hhhhxL
*************************************************************************
 -->
<div id="container" style="max-width:800px;height:400px"></div>
<script>
    var chart = Highcharts.chart('container', {
        title: {
            text: '2018.11 ~ 2019.04 各品牌运动鞋销售情况及预测'
        },
        subtitle: {
            text: '数据来源：运动鞋销售管理系统'
        },
        yAxis: {
            title: {
                text: '销售量'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 1
            }
        },
        series: [{
            name: 'Adidas',
            data: [485, 513, 549, 577, 598, 618, 651]
        }, {
            name: 'LINING',
            data: [389, 410, 441, 465, 470, 501, 523]
        }, {
            name: 'ANTA',
            data: [304, 332, 369, 368, 377, 396, 410]
        }, {
            name: 'Nike',
            data: [265, 287, 322, 382, 412, 448, 506]
        }, {
            name: 'kappa',
            data: [221, 235, 276, 288, 324, 359, 394]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });</script>
</body>
</html>